<template>
  <aside class="left-sidebar">
<!--    <div class="sidebar-header">
      <h3>分类</h3>
    </div>-->

    <ul class="category-list">
      <li
        v-for="category in categories"
        :key="category.id"
        class="category-item"
        :class="{ active: activeCategory === category.id }"
        @click="selectCategory(category)"
      >
        <div class="category-icon" v-if="category.isFrame">
          <el-icon>
            <component :is="category.isFrame"
                       class="custom-icon"
          /></el-icon>

        </div>
        <span class="category-label">{{ category.name }}</span>
      </li>
    </ul>

<!--    <div class="sidebar-footer">
      <el-button link class="more-btn">
        更多分类
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>-->
  </aside>
</template>

<script setup>
const props = defineProps({
  categories: {
    type: Array,
    required: true
  },
  activeCategory: {
    type: String,
    default: 'recommended'
  }
})

const selectCategory = (category) => {
  emit('select-category', category)
}
</script>

<style lang="scss" scoped>
.sidebar-header {
  padding: $spacing-md;
  border-bottom: 1px solid $border-color;

  h3 {
    font-size: 16px;
    font-weight: 500;
    color: $text-primary;
  }
}

.category-list {
  list-style: none;

  .category-item {
    display: flex;
    align-items: center;
    padding: $spacing-md;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background-color: $primary-light;
      color: $primary-color;
    }

    &.active {
      background-color: $primary-light;
      color: $primary-color;
      font-weight: 500;
    }

    .category-icon {
      margin-right: $spacing-sm;
      font-size: 16px;
    }

    .category-label {
      flex: 1;
      font-size: 14px;
    }
  }
}

.sidebar-footer {
  padding: $spacing-md;
  border-top: 1px solid $border-color;
  text-align: center;

  .more-btn {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .el-icon {
      margin-left: $spacing-xs;
    }
  }
}
</style>
